<template>
  <div class="verify_code">
    <Header left="arrow" title=""></Header>
    <Tip :verifyCode="true" :value="value"></Tip>
    <van-loading v-show="loading" class="loading" size="1rem" />
    <van-password-input
      class="verify-code"
      :value="code"
      :mask="false"
      :gutter="20"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <div class="count">{{ count }}秒后重发</div>
    <van-number-keyboard
      v-model="code"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import loginApi from "@/api/login";
import Vue from "vue";
import { PasswordInput, NumberKeyboard, Loading } from "vant";
import Header from "../../components/Header";
import Tip from "../../components/login/Tip";

Vue.use(PasswordInput);
Vue.use(NumberKeyboard);
Vue.use(Loading);
export default {
  components: {
    Header,
    Tip,
  },
  data() {
    return {
      value: "",
      code: "",
      count: 120,
      showKeyboard: true,
      loading: false,
    };
  },
  beforeRouteEnter(to, from, next) {
    // console.log(to.params.city)
    next((vm) => {
      vm.value = to.params.value;
    });
  },
  watch: {
    code(newValue, oldValue) {
      console.log(newValue);
      if (newValue == "111111") {
        var formData = new FormData();
        if (/^1[345678]\d{9}$/.test(this.value)) {
          formData.append("tel", this.value);
        } else if (
          /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(
            this.value
          )
        ) {
          formData.append("eMail", this.value);
        }
        this.loading = true;
        loginApi.login(formData).then((response) => {
          if (response.data.code == 200) {
            console.log(response.data);
            this.$store.dispatch("setUserInfo", response.data.data);
            this.loading = false;
            this.$router.go(-2);
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.verify_code {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 0.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}
.verify-code {
  margin-top: 2rem;
}
.loading {
  position: absolute;
  top: 10rem;
  left: 4.5rem;
}
::v-deep.van-password-input__security li {
  border-bottom: 1px solid #c7c7c8;
}
.count {
  color: #aaa;
  text-align: right;
  padding-right: 0.45rem;
  margin-top: 0.3rem;
}
</style>